<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>'Hello, world!' example</title>
  <style type="text/css">
    #the-canvas {
      border: 1px solid black;
    }
  </style>
</head>

<body>
  <script src="./static/pdfjs/build/pdf.js"></script>
  <!-- <h1>PDF.js 'Hello, base64!' example</h1> -->
  <canvas id="the-canvas"></canvas>
</body>
<script type="text/javascript">
  /**
   *坑：
   * 之前版本（具体版本分界线我也不知道，我下载 的是2.0.943版本）写法：
   *      PDFJS.workerSrc = '../build/pdf.worker.js';//加载核心库
   *      PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf) {
   *     
   *      })
   * 2.0.943版本写法：
   *      pdfjsLib.GlobalWorkerOptions.workerSrc ='../build/pdf.worker.js';
   *      pdfjsLib.getDocument(url).then(function(pdf){
   *
   *      });
   */
  pdfjsLib.GlobalWorkerOptions.workerSrc =
    './static/pdfjs/build/pdf.worker.js';
  var loadingTask = pdfjsLib.getDocument("https://gkoo-1252552722.cos.ap-beijing-1.myqcloud.com/inner.pdf");//  _url为后台请求pdf流的路径
  loadingTask.promise.then(function (pdf) {
    pdf.getPage(2).then(function (page) {
      /**
       * 坑：
       * 官网上给的例子是这样写的
       *      var scale = 1.5;
       *      var viewport = page.getViewport({ scale: scale, });
       * 但是！！我们要这样写：
       *      var scale = 1.5;
       *      var viewport = page.getViewport(scale);
       */
      var scale = 1.5;
      var viewport = page.getViewport({ scale: scale, });
      var canvas = document.getElementById('the-canvas');
      var context = canvas.getContext('2d');
      canvas.height = viewport.height;
      canvas.width = viewport.width;
      var renderContext = {
        canvasContext: context,
        viewport: viewport,
      };
      page.render(renderContext);
    });
  });
</script>

</html>